<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="options.formOps"
      @onQuery="getList"
    >
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['inspectionPoint:create']"
          >新增</el-button
        >
      </el-col>

      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:user:remove']"
          >删除</el-button
        >
      </el-col> -->

      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['system:user:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
      actionWidth="280"
    >
      <template #routeId="{ row }">
        {{ row.routeName }}
      </template>
      <template #projectId="{ row }">
        {{ row.projectName }}
      </template>
      <template #default>
        <el-table-column
          label="是否启用"
          width="200"
          prop="stopCheck"
          align="center"
          key="stopCheck"
        >
          <template #default="{ row }">
            {{ row.stopCheck == 0 ? "启用" : "停用" }}
          </template>
        </el-table-column>
      </template>
      <template #actionButton="{ row }">
        <el-button
          v-if="row.stopCheck == 0"
          type="text"
          @click="updateStopCheck(row, 1)"
          v-hasPermi="['inspectionPoint:updateStopCheck']"
          >停用</el-button
        >
        <el-button
          v-if="row.stopCheck == 1"
          type="text"
          @click="updateStopCheck(row, 0)"
          v-hasPermi="['inspectionPoint:updateStopCheck']"
          >启用</el-button
        >
        <el-button type="text" @click="handleCode(row)">二维码</el-button>
        <el-button
          type="text"
          icon="Edit"
          @click="handleEdit(row)"
          v-hasPermi="['inspectionPoint:update']"
          >修改</el-button
        >

        <el-button
          type="text"
          icon="Delete"
          style="color: red"
          @click="handleDel(row)"
          v-hasPermi="['inspectionPoint:delete']"
          >删除</el-button
        >
      </template></Table
    >
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      @onSubmit="onSubmit"
      :title="dialogType == 'add' ? '新增巡检点位' : '修改巡检点位'"
      :slots="['deptName', 'userName']"
    >
    </DialogVform>
    <el-dialog v-model="imgDialog" width="380px" center>
      <img style="margin: 0 auto" :src="codeUrl" alt="" />
      <template #footer>
        <el-button
          type="primary"
          @click="handleDownLoad(downloadUrl, '二维码.png')"
          >下载</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import { apis as APIS } from "@/api/znxj/xjdw.js";
import { apis as JCXM } from "@/api/znxj/jcxm.js";
import { apis as XJLX } from "@/api/znxj/xjlx.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
const imgDialog = ref(false);
const downloadUrl = ref("");
const codeUrl = ref("");
const handleCode = (row) => {
  imgDialog.value = true;
  downloadUrl.value = row.codeImageFileUrl;
  codeUrl.value = "/dev-api/file/download?url=" + row.codeImageFileUrl;
};
const { proxy } = getCurrentInstance();
const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["pointCode", "pointName", "pointState", "pointType"].includes(i.prop)
  ),
});

const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const updateStopCheck = (data, stopCheck) => {
  APIS.updateStopCheck({
    id: data.id,
    stopCheck,
  }).then((res) => {
    getList();
  });
};
const plugSubmit = (data) => {
  return {
    ...data,
    projectName: jcxmList.value[data.projectId],
    routeName: xjlxList.value[data.routeId],
  };
};
const {
  onSubmit,
  fetchData,
  handleAdd,
  handleEdit,
  getList,
  handleDel,
  queryParams,
  dialogType,
  form,
  handleDownLoad,
} = useAsyncData({ APIS, formJson, dialogVform, table, proxy, plugSubmit });
const jcxmList = ref({});
const xjlxList = ref({});
const pageForm = {};
onMounted(() => {
  JCXM.query(pageForm).then((res) => {
    res.rows.forEach((item) => {
      jcxmList.value[item.id] = item.projectCode;
    });
  });
  XJLX.query(pageForm).then((res) => {
    res.rows.forEach((item) => {
      xjlxList.value[item.id] = item.routeName;
    });
  });
});
</script>

<style lang="scss" scoped></style>
